<template>
    <el-dialog
        :title="dialogType == 'add' ? '添加部门信息' : '编辑部门信息'"
        :visible.sync="editDialog"
        width="500px"
    >
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            size="medium"
            style="width:400px"
        >
            <el-form-item label="上级部门：" prop="parentName">
                <el-input v-model="form.parentName" readonly />
            </el-form-item>
            <el-form-item label="部门名称：" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
                <el-input v-model.number="form.sort" />
            </el-form-item>
            <el-form-item label="状态：">
                <el-switch
                    v-model="form.status"
                    :disabled="isDisabled"
                    active-color="#179BFF"
                    inactive-color="#ff4949"
                    :active-text="showName"
                    active-value="1"
                    inactive-value="0"
                    :width="54"
                />
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
                <el-input v-model.trim="form.remark" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveForm(['form'])"
                    >保存</el-button
                >
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
const defaultForm = {
    name: "",
    sort: "",
    status: "1",
    remark: ""
};
export default {
    name: "Sectionmsg",
    props: { value: Boolean },
    data() {
        // 失去焦点验证
        const EmptyValidator = (rule, value, callback) => {
            if (result == true) {
                callback();
            } else {
                // 当名称出现重复时页面提示
                callback(new Error("部门名称重复"));
            }
        };
        return {
            // 表单验证
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入部门名称",
                        trigger: "blur"
                    },
                    { validator: EmptyValidator, trigger: "blur" }
                ],
                sort: [
                    { required: true, message: "排序不能为空" },
                    { type: "number", message: "排序必须为数字值" }
                ]
            },
            editDialog: false,
            form: Object.assign({}, defaultForm),
            msg: "",
            // 状态是否禁用
            isDisabled: false,
            // 弹出框类型
            dialogType: ""
        };
    },
    computed: {
        showName() {
            return this.form.status === "1" ? "启用" : "禁用";
        }
    },
    watch: {
        value(val) {
            this.editDialog = val;
        },
        editDialog(val) {
            this.$emit("input", val);
            if (val === false) {
                this.msg = "";
                this.$refs["form"].resetFields();
                this.form = Object.assign({}, defaultForm);
            }
        }
    },
    methods: {
        saveForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.msg = { ...this.form };
                    if (this.dialogType == "add") {
                        this.$message({
                            type: "success",
                            message: "部门添加成功!"
                        });
                        this.$emit("QueryDepartment");
                        this.editDialog = false;
                    } else {
                        this.$message({
                            type: "success",
                            message: "部门修改成功!"
                        });
                        this.$emit("QueryDepartment");
                        this.editDialog = false;
                    }
                } else {
                    return false;
                }
            });
        },
        getRow(val) {
            // 获取ID并保存在msg里面
            this.msg = val;
            this.msg.parentName = val.parentName;
            this.msg.status = val.status.toString();
            this.form = { ...this.msg };
            // 当子部门不为空时
            if (val.children == null || val.children.length == 0) {
                // 状态只读
                this.isDisabled = false;
            } else {
                this.isDisabled = true;
            }
        },
        // 获取父级名字ID
        getName(val) {
            this.dialogType = "add";
            this.isDisabled = false;
            this.msg.parentName = val.name;
            this.msg.parentId = val.id;
        },
        resetForm() {
            if (this.msg) {
                this.form = { ...this.msg };
            } else {
                this.form = Object.assign({}, defaultForm);
            }
        }
    }
};
</script>
